<template>
	<view class="dropdown">
		<view class="item">
			<view class="item-title">状态</view>
			<view class="item-box">
				<view v-for="(item,index) in menuList" :key="item.code" :class="['item-menu',item.ck?'active':'']"
					@click="changeMenu(index)">{{item.name}}
				</view>
			</view>

			<view class="item-title">时间</view>
			<view class="item-box">
				<view v-for="(item,index) in dateList" :key="item.code"
					:class="['item-menu',currentDate==index?'active':'']" @click="changeDate(index)">{{item.name}}
				</view>
			</view>
			<view class="custom-date" v-if="currentDate==3">
				<view class="custom-date-ipute">
					<dyDatePicker placeholder="开始日期" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
						:iconshow="false" @getData="starteDate" ref="startDatePickerRef"></dyDatePicker>
				</view>
				<view class="custom-date-line"></view>
				<view class="custom-date-ipute">
					<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect" 
						:maxSelect="to_maxSelect" :iconshow="false" @getData="endDate" ref="endDatePickerRef">
					</dyDatePicker>
				</view>
			</view>
		</view>

		<view class="dropdown-footer">
			<view class="dropdown-footer-btn reset" @click="resetDropdown">重置</view>
			<view class="dropdown-footer-btn submit" @click="submitSelect">确定</view>
		</view>
	</view>
</template>
<script>
	import dyDatePicker from '@/components/dy-Date/dy-Date.vue';
	import dayjs from 'dayjs'
	export default {
		components: {
			dyDatePicker
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				menuList: [],
				dateList: [{
						code: 1,
						name: '今天',
						subDay: 0
					},
					{
						code: 2,
						name: '昨天',
						subDay: 1
					},
					{
						code: 3,
						name: '近一周',
						subDay: 7
					},
					{
						code: 4,
						name: '自定义时间',
						subDay: ''
					}
				],
				from_minSelect: '1900/01/01',
				from_maxSelect: '2050/12/31',
				to_minSelect: '1900/01/01',
				to_maxSelect: '2050/12/31',
				currentDate: undefined,
				selectData: {
					menu: [],
					startTime: undefined,
					endTime: undefined
				},

			}
		},
		watch: {
			list: {
				handler(newVal, oldVal) {
					this.init()
				},
				deep: true,
				immediate: true
			}
		},
	
		methods: {
			init() {
				const menuList = JSON.parse(JSON.stringify(this.list));
				menuList.forEach(item => item.ck = false);
				this.menuList = menuList
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
				this.from_minSelect = beforeDate;
				this.from_maxSelect = todayDate;
				this.to_minSelect = beforeDate;
				this.to_maxSelect = todayDate;
				this.resetDropdown(false)
			},
			// change为false时不发送 change事件  仅仅重置
			resetDropdown(change=true) {
				this.menuList.forEach(item => item.ck = false);
				if (this.currentDate == 3) {
					this.$refs.startDatePickerRef.clear();
					this.$refs.endDatePickerRef.clear();
				}
				this.currentDate = 999;
				this.initDate();
				this.selectData.menu = [];
				this.selectData.startTime = undefined;
				this.selectData.endTime = undefined;
				if(change){
					this.$emit('change', this.selectData);
				}
			},
			submitSelect() {
				if (this.currentDate == 3) {
					if (!this.selectData.startTime || !this.selectData.endTime) {
						uni.showToast({
							icon: "none",
							title: "开始日期和结束日期都不能为空！",
							duration: 3000
						})
						return
					};
				};
				this.$emit('change', this.selectData);
			},
			initDate() {
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
				this.from_minSelect = beforeDate;
				this.from_maxSelect = todayDate;
				this.to_minSelect = beforeDate;
				this.to_maxSelect = todayDate
			},
			changeMenu(index) {
				const handelItem = this.menuList[index].ck;
				this.menuList[index].ck = !handelItem;
				const checkList = [];
				this.menuList.forEach(item => {
					if (item.ck) {
						checkList.push(item.code)
					}
				})
				this.selectData.menu = checkList;
			},
			changeDate(index) {
				this.currentDate = index;
				if (index == 3) {
					this.selectData.startTime = undefined;
					this.selectData.endTime = undefined;
					return
				}
				const todayDate = dayjs().format('YYYY-MM-DD');
				const beforeDate = dayjs().subtract(this.dateList[index].subDay, 'day').format('YYYY-MM-DD')
				this.selectData.startTime = beforeDate;
				this.selectData.endTime = todayDate;
			},
			starteDate(val) {
				if (this.selectData.endTime) {
					const diffDate = dayjs(this.selectData.endTime).diff(val, 'day');
					if (diffDate < 0) {
						uni.showToast({
							icon: "none",
							title: "开始日期不能大于结束日期",
							duration: 3000
						})
						this.$refs.startDatePickerRef.clear();
						return
					}
				}
				this.selectData.startTime = val;
			},
			endDate(val) {
				if (this.selectData.startTime) {
					const diffDate = dayjs(val).diff(this.selectData.startTime, 'day');
					if (diffDate < 0) {
						uni.showToast({
							icon: "none",
							title: "结束日期不能小于开始日期",
							duration: 3000
						})
						this.$refs.endDatePickerRef.clear()
						return
					}
				}
				this.selectData.endTime = val;
			}
		}
	}
</script>

<style scoped lang="scss">
	.dropdown {
		padding: 32rpx 28rpx 48rpx 28rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 16rpx;

		.item {
			&-title {
				font-size: 24rpx;
				font-family: PingFangTC-Medium, PingFangTC;
				font-weight: 600;
				color: #000000;
			}

			&-box {
				display: flex;
				flex-wrap: wrap;
				margin-left: -40rpx;
				margin-bottom: 32rpx;
			}

			&-menu {
				width: 27.1%;
				height: 56rpx;
				background: #ECEDF3;
				border-radius: 8rpx;
				text-align: center;
				line-height: 56rpx;
				margin-top: 24rpx;
				margin-left: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
			}

			.active {
				background: #0064FF;
				color: #fff;

			}
		}

		.custom-date {
			display: flex;
			align-items: center;

			.custom-date-line {
				width: 30rpx;
				height: 2px;
				background: #eee;
				margin: 0 10rpx;
			}

			.custom-date-ipute {
				border: 1px solid #0064FF;
				width: 50%;
				text-align: center;
				height: 56rpx;
				color: #0064FF;
				border-radius: 8rpx;
			}
		}

		&-footer {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 32rpx;

			&-btn {
				width: 298rpx;
				height: 82rpx;
				text-align: center;
				border-radius: 12rpx;
				font-weight: 500;
				line-height: 82rpx;
				font-size: 32rpx;
			}

			.reset {
				border: 2rpx solid #0064FF;
				color: #0064FF;
			}

			.submit {
				color: #fff;
				background: #0064FF;
				border: 2rpx solid #0064FF;
			}
		}
	}
</style>